<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>田芷芷的请销假</title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
		</script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			body{
				font-family: 黑体;
			}
			.header img{
				position: fixed;
				z-index: 999;
				top: 0;
				width: 100%;
			}
			.title{
				width: 100%;
				position: fixed;
				z-index: 99;
				background-color: #fff;
				top: 47px;
				border-bottom: 1px #efefef solid;
			}
			.title p{
				font-size: 20px;
				text-align: center;
				padding: 10px 0;
			}
			.ren{
				background-color: #f5f6fa;
				font-size: 18px;
				color: #656565;
				padding: 5px 0 5px 5px;
			}
			.pic{
				position: fixed;
				top: 56px;
				right: 10px;
				z-index: 999;
				width: 90px;
			}
			.top{
				position: relative;
				display: flex;
				border-top: 1px #efefef solid;
				border-bottom: 1px #efefef solid;
			}
			.top p{
				font-size: 18px;
				color: #393939;
				padding: 8px 0 8px 8px;
			}
			.top img{
				padding-top: 10px;
			}
			.top .tu1{
				position: absolute;
				right: 15px;
			}
			
			
			#imgPreview {
				position: absolute;
				top: 280px;
				left: 115px;
				width: 110px;
			    height: 110px;
			    text-align: center;
			}
			
			#prompt3 {
			 width: 100%;
			 height: 110px;
			 text-align: center;
			 position: relative;
			}
			#imgSpan {
			 position: absolute;
			 top: 60px;
			 left: 40px;
			}
			.filepath {
			 width: 100%;
			 height: 100%;
			 opacity: 0;
			}
			#img3 {
			 height: 100%;
			 width: 100%;
			 display: none;
			}
			#imgPreview1 {
				position: absolute;
				top:1250px;
				left: 100px;
				width: 30%;
			    height: 150px;
			    text-align: center;
			}
			
			#prompt31 {
			 width: 100%;
			 height: 150px;
			 text-align: center;
			 position: relative;
			}
			#imgSpan1 {
			 position: absolute;
			 top: 60px;
			 left: 40px;
			}
			.filepath {
			 width: 100%;
			 height: 100%;
			 opacity: 0;
			}
			#img31 {
			 height: 100%;
			 width: 100%;
			 display: none;
			}
			
			
			
			.neirong{
				padding: 5px 0 0 25px;
				background-color: #FFFFFF;
				border-top: 1px #efefef solid;
				border-bottom: 1px #efefef solid;
			}
			.neirong p{
				padding: 2px 0;
				font-size: 16px;
				color: #c9c9cb;
			}
			.neirong p span{
				color: #000;
				padding-left: 20px;
			}
			input{
				color: #000;
				border: none;
				font-size: 16px;
				height: 21px;
				text-align: left;
			}
			
			
			.chenggong{
				padding: 15px 10px;
				position: relative;
				background-color: #fff;
				border-top: 1px #efefef solid;
				border-bottom: 1px #efefef solid;
				display: flex;
				height: 120px;
				justify-content: space-between;
			}
			.chenggong input{
				font-size: 14px;
			}
			.left{
				width: 30px;
				margin-left: 7px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: rgb(135,208,102);
				color: #fff;
				border-radius: 50%;
				position: relative;
				z-index: 11;
			}
			.center{
				color: #000;
				padding-left: 10px;
			}
			.center p{
				color: rgb(135,208,102);
			}
			.tongguo{
				position: absolute;
				top: 80px;
				color: rgb(135,208,102);
				font-size: 14px;
				left: 40px;
			}
			.rxiu{
				text-align: right;
				color: #c9c9cb;
			}
			.lvse{
				color: rgb(135,208,102);
			}
			.xian{
				position: absolute;
				top: 20px;
				left: 30px;
				width: 2px;
				height: 90px;
				background-color: rgb(135,208,102);
			}
			.huixian{
				position: absolute;
				width: 40px;
				height: 2px;
				top: 115px;
				left: 12px;
				background-color: #c9c9cb;
			}
			.shenren{
				display: flex;
				flex-flow: wrap;
				color: #656565;
				padding: 6px 0;
			}
			.shenren span{
				display: block;
				padding: 5px;
				border: 1px #efefef solid ;
				font-size: 16px;
				margin: 10px;
			}
			.footer{
				text-align: center;
				padding: 12px 0;
				border: 1px #efefef solid;
				color: skyblue;
			}
			.text{
				display: flex;
			}
			.text .text1{
				width: 70px;
				text-align: right;
			}
			.text .text2{
				width: 280px;
				text-align: left;
				color: #000;
				margin-left: 10px;
			}
			.text .text2 input{
				padding-left: 13px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<img src="img/header.png">
		</div>
		<p class="gaodu" style="height: 47px;background-color: #fff;position: relative;z-index: 9;"></p>
		<div class="title">
			<p>田芷芷的请销假</p>
		</div>
		<p class="gaodu" style="height: 46px;"></p>
		<p class="ren">
			申请人
		</p>
		<img class="pic" src="img/shenpi.png">
		<div class="top">
			<p>田芷芷(12017121088)</p><img src="img/dianhua.png" width="36px" height="28px">
			<img class="tu1" src="img/tu1.png" width="25px" height="20px">
		</div>
		<p class="ren">
			申请内容
		</p>
		<div class="neirong">
			<div class="text">
				<p class="text1">审批编号</p><p class="text2">20201010170008610257</p>
			</div>
			<div class="text">
				<p class="text1">是否离校</p><p class="text2">是</p>
			</div>
			<div class="text">
				<p style="height: 155px;text-indent: 1em;" class="text1">正脸照</p>
			<div id="imgPreview">
			 <div id="prompt3">
			 <span id="imgSpan">
			 点击上传
			 <br />
			 <i class="aui-iconfont aui-icon-plus"></i>
			 <!--AUI框架中的图标-->
			 </span>
			 <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
			 <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
			 </div>
			 <img src="#" id="img3" />
			</div>
			</div>
			<div class="text">
				<p class="text1">目前所在<br>校区</p><p class="text2">本部</p>
			</div>
			<div class="text">
				<p style="text-indent: 2em;" class="text1">学院</p><p class="text2">文化产业与旅游管理学院</p>
			</div>
			<div class="text">
				<p style="text-indent: 1em;" class="text1">辅导员</p><p class="text2">孙颖娴</p>
			</div>
			<div class="text">
				<p class="text1">开始时间</p><p class="text2"><input type="text" placeholder="修改"></p>
			</div>
			<div class="text">
				<p class="text1">结束时间</p><p class="text2"><input type="text" placeholder="修改"></p>
			</div>
			<div class="text">
				<p style="text-indent: 2em;" class="text1">时长</p><p class="text2">0.62</p>
			</div>
			<div class="text">
				<p class="text1">请假类型</p><p class="text2">事假</p>
			</div>
			<div class="text">
				<p class="text1">具体请假<br>原因</p><p class="text2"><input type="text" placeholder="修改"></p>
			</div>
			<div class="text">
				<p class="text1">所在宿舍</p><p class="text2">1-537</p>
			</div>
			<div class="text">
				<p class="text1">是否离校<br>(旧)</p><p class="text2">是</p>
			</div>
			<div class="text">
				<p class="text1">离校去向</p><p class="text2"><input type="text" placeholder="修改"></p>
			</div>
			<div class="text">
				<p class="text1">出校时间</p><p class="text2"><input type="text" placeholder="修改"></p>
			</div>
			<div class="text">
				<p class="text1">预计返校</p><p class="text2"><input type="text" placeholder="修改"></p>
			</div>
			<div class="text">
				<p class="text1">22: 30前<br>是否回校<br>住宿</p>
				<p class="text2">是</p>
			</div>
			<div class="text">
				<p class="text1">本人联系<br>电话</p><p class="text2">15380961913</p>
			</div>
			<div class="text">
				<p class="text1">家庭联系<br>人</p><p class="text2">父亲</p>
			</div>
			<div class="text">
				<p class="text1">家庭联系<br>电话</p><p class="text2">15224950115</p>
			</div>
			<p style='height: 165px;'>证明材料</p>
			<div id="imgPreview1">
			 <div id="prompt31">
			 <span id="imgSpan1">
			 点击上传
			 <br />
			 <i class="aui-iconfont aui-icon-plus"></i>
			 <!--AUI框架中的图标-->
			 </span>
			 <input type="file" id="file1" class="filepath" onchange="changepic1(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
			 <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
			 </div>
			 <img src="#" id="img31" />
			</div>
		</div>
		<p class="ren">
			审批进度
		</p>
		<div class="chenggong">
			<div class="left">1</div>
			<div class="center">孙颖娴(001449)
			<p>已同意</p></div>
			<div class="right"><input class="rxiu" type="text" placeholder="修改"></div>
			<div class="xian">
				
			</div>
			<div class="huixian"></div>
			<p class="tongguo">通过 <input class="lvse" type="text"placeholder="修改"></p>
		</div>
		
		<p class="ren">
			已抄送
		</p>
		<div class="shenren">
			<span>蒋莉(301019)</span>
			<span>李可薇(12017121106)</span>
			<span style="margin: 0 10px 10px 10px;">杨晴(301010)</span>
		</div>
		<div class="footer">
			转发审批表单
		</div>
		<script>
			function changepic() {
			 $("#prompt3").css("display", "none");
			 var reads = new FileReader();
			 f = document.getElementById('file').files[0];
			 reads.readAsDataURL(f);
			 reads.onload = function(e) {
			 document.getElementById('img3').src = this.result;
			 $("#img3").css("display", "block");
			 };
			}
			var a=$('.header img').height();
			window.onload = function() { 
				$(".gaodu").css("height",a+"px");
				$(".title").css("height",a+"px");
				$(".title").css("top",a+"px");
				console.log(a)
				
			}; 
            function changepic1() {
			 $("#prompt31").css("display", "none");
			 var reads = new FileReader();
			 f = document.getElementById('file1').files[0];
			 reads.readAsDataURL(f);
			 reads.onload = function(e) {
			 document.getElementById('img31').src = this.result;
			 $("#img31").css("display", "block");
			 };
			}
		</script>
	</body>
</html>
